html,body {
    margin:0;
    padding:0;
    height:100%;
}

#app {
    height:100%;
    font-size:14px;
    overflow:hidden;
    font-family:-apple-system, PingFang SC, Helvetica Neue, Helvetica, Segoe UI, Ubuntu, Roboto, Oxygen, Cantarell, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, WenQuanYi Micro Hei, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
    box-sizing: border-box;
}
/* 默认PC端大屏 应用总容器 */
.app-container {
    width:1920px;
    height:100%;
    overflow:hidden;
    margin:0 auto;
}

/* 单个页面容器 */
.page-container {
    width:100%;
    height:100%;
}
/* 单个功能模块容器 */
.page-wrapper {
    width:100%;
    height:1000px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size:cover;
}
.page-wrapper .page-content {
    width:75%;
    margin:0 auto;
    height:100%;
    position:relative;
    /* background:rgba(243, 243, 243, 0.25); */
}
.page-content .text-container {
    position:absolute;
    top:40%;
}
.page-content .text-container .text {
    font-size:36px;
    font-weight:bold; 
    line-height:36px; 
    color:#fff;
}
.page-content .text-container .sub-text {
    font-size:24px;
    line-height:24px; 
    color:#fff;
}

.page-wrapper .title {
    color:#000;
    /* font-weight:bold; */
    font-size:48px;
    line-height:80px;
    text-align:center;
    margin-bottom:24px;
}
.page-wrapper .sub-title {
    color:#000;
    font-size:16px;
    text-align:center;
}
.fullbanner-container {
    width:100%;
    height:100%;
    min-height:950px;
}
.fullbanner-container > img {
    width:100%;
    height:auto;
} 
.empty-wrapper {
    font-size:20px;
    line-height:32px;
    color:#525866;
    text-align:center;
    width:100%;
}
/* 自定义卡片组件样式 */
.card-container {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:24px;
}
.card-wrapper {
    display:inline-block;
    width:33.3%;
    padding-right:24px;
}
.card {
    width:100%;
    background:#fff;
    border-radius: 4px;
}
.card .card-image {
    height:261px;
    width:100%;
    background-repeat: no-repeat;
    background-size:cover;
    background-position: 50% 50%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.card .card-content {
    padding:24px;
}
.card .card-title {
    font-size:24px;
    line-height:40px;
    color:#0E121B;
    white-space: nowrap;      /* 确保文本在一行内显示 */
    overflow: hidden;         /* 隐藏溢出的内容 */
    text-overflow: ellipsis;  /* 使用省略号表示文本溢出 */ 
    margin-bottom:10px;
}
.card .card-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 显示3行 */
    overflow: hidden;
    text-overflow: ellipsis; /* 多行时显示省略号 */
    white-space:normal;
    font-size:16px;
    line-height:26px;
    height:80px;
    color:#525866;
}
.card .card-extra {
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-top:40px;
}
.card .tag {
    display:inline-block;
    padding:6px 10px;
    border-radius:4px;
    background:#f5f7fa;
    font-size:12px;
    line-height:12px;
    color:#525866;
    margin-right:6px;
}
.card .tag:last-child {
    margin-right:0;
}
/* 自定义分页符组件样式 */
.custom-pagination.el-pagination {
    justify-content: center;
}
.custom-pagination.el-pagination ul.el-pager > li {
    border-radius:50%;
    background:#fff;
    color:#525866;
    font-size:14px;
    padding:8px;
    border: 1px solid #e1e4ea;
    margin:0 4px;
}
.custom-pagination.el-pagination ul.el-pager > li.is-active {
    background:#335CFF;
    border: 1px solid #e1e4ea;
    color:#fff;
}
.custom-pagination.el-pagination .btn-prev.is-first {
    margin-right:8px;
}
.custom-pagination.el-pagination .btn-next.is-last {
    margin-left:8px;
}
.el-popper {
    max-width: 460px !important;
    padding:14px;
    font-size:14px;
    color:#777777;
}
 
/* 高清分辨率  */
@media ( min-width:1920px ) {
    .app-container {
        width:100%;
    }
}
/* PC端中屏 */
@media ( max-width:1680px ) {
    .app-container {
        width:1680px;
    }
    .page-wrapper .page-content {
        width:100%;
    }
}
/* PC端小屏 */ 
@media ( max-width:1440px ) {   
    .app-container {
        width:1440px;
    }
    .page-wrapper .page-content {
        width:100%;
    }
}
